Yes, you can use multiple pseudo-elements on the same element, but only ::before and ::after are available per element. To achieve multiple effects, you can layer these pseudo-elements using CSS properties like position, z-index, and transform.

Key Points

1
Each element can have one ::before and one ::after pseudo-element.
2
You can style them differently to create layered visual effects.
3
Combining pseudo-elements with CSS position and z-index allows stacking or offsetting elements.
4
For more than two layers, you may need nested elements or additional wrappers.

Example: Using Both ::before and ::after

In this example, the paragraph uses both ::before and ::after pseudo-elements to add decorative circles on either side of the text, demonstrating how multiple pseudo-elements can enhance styling without extra HTML.

Best Practices

1
Limit pseudo-element usage to decorative or visual enhancements.
2
Always define content to ensure they render.
3
Combine with CSS layout properties for precise placement and layering.
4
Test across browsers for consistent display, as positioning may vary slightly.

Difficulty: 3/10

Topics: pseudo-elements, CSS specificity, element styling

Scenario Questions

0-2 years experience

1
How would you add a small star icon after a product title using CSS without changing the HTML?
2
What happens if you try to use ::before twice on the same element — will both show up?

2-5 years experience

1
A designer wants a badge with a gradient border and a shadow on a button — you’ve used ::before and ::after, but one of them disappears on mobile. What’s likely going wrong?
2
You’re building a tooltip with ::before and ::after for the arrow, but it breaks when the text wraps. How do you fix it without changing the HTML structure?

5-8 years experience

1
You’re optimizing a component library where 80% of buttons use ::before and ::after for icons — how do you reduce render-blocking CSS and avoid layout thrashing on low-end devices?
2
A legacy component uses multiple JS-generated spans to simulate pseudo-elements. How would you migrate it to pure CSS while preserving accessibility and animation performance?

8+ years experience

1
Your design system uses pseudo-elements for decorative states across 50+ components — how do you architect this to avoid specificity wars and enable dark mode theming without duplicating styles?
2
You’re migrating from a legacy UI framework that relies on JS to inject pseudo-element-like decorations. What’s your strategy to phase out the JS while maintaining performance, accessibility, and test coverage across 10+ teams?

Follow-up Questions

❓How would you debug if one of your pseudo-elements isn't showing up?
❓What happens if you try to add a third pseudo-element like ::third?
❓Can you style ::before and ::after differently based on hover state?